JavaScript API গুলোর সাথে Elm ব্যবহার

Elm একটি declarative এবং functional programming ভাষা যা ক্লায়েন্ট-সাইড ওয়েব ডেভেলপমেন্টের জন্য ডিজাইন করা হয়েছে। যদিও Elm সরাসরি JavaScript API গুলির সাথে ইন্টারঅ্যাক্ট করতে পারে না, তবে Elm এবং JavaScript এর মধ্যে যোগাযোগ স্থাপন করার জন্য Ports ব্যবহার করা হয়। Ports হল এমন একটি পদ্ধতি যার মাধ্যমে আপনি Elm অ্যাপ্লিকেশন থেকে JavaScript কোড কল করতে পারেন এবং এর বিপরীতও করতে পারেন।

এখানে JavaScript API এর সাথে Elm এর ইন্টিগ্রেশন এবং তাদের ব্যবহারের কিছু উদাহরণ দেওয়া হলো।

১. Elm এবং JavaScript এর মধ্যে যোগাযোগ (Ports)

Elm সরাসরি DOM বা JavaScript API ইন্টারঅ্যাক্ট করতে পারে না, কিন্তু Ports ব্যবহারের মাধ্যমে আপনি JavaScript এর সাথে ইন্টারঅ্যাক্ট করতে পারেন। এই পদ্ধতিতে Elm থেকে JavaScript এ সিগন্যাল পাঠানো হয়, এবং JavaScript থেকে Elm-এ ফলাফল পাঠানো হয়।

১.১. Elm থেকে JavaScript API কল করা

ধরা যাক, আপনি একটি JavaScript API (যেমন Geolocation API) ব্যবহার করতে চান যাতে ব্যবহারকারীর অবস্থান (location) পাওয়া যায় এবং তা Elm অ্যাপ্লিকেশনে প্রেরণ করা হয়।

Elm Code:

port module Main exposing (..)

port getLocation : Cmd msg
port locationReceived : (String -> msg) -> Cmd msg

type Msg
    = LocationReceived String

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
    case msg of
        LocationReceived location ->
            (model, Cmd.none)

view : Model -> Html Msg
view model =
    div []
        [ button [ onClick getLocation ] [ text "Get Location" ]
        ]

-- Main function
main =
    Html.beginnerProgram { model = init, view = view, update = update }

JavaScript Code:

var app = Elm.Main.init({
  node: document.getElementById('elm')
});

app.ports.getLocation.subscribe(function() {
  // Using JavaScript's Geolocation API
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      const location = `Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}`;
      app.ports.locationReceived.send(location);  // Send location data back to Elm
    });
  } else {
    app.ports.locationReceived.send("Geolocation not supported");
  }
});

এখানে, Elm এর getLocation পোর্ট JavaScript এর Geolocation API কে কল করছে এবং তার থেকে প্রাপ্ত তথ্য Elm এ প্রেরণ করছে locationReceived পোর্টের মাধ্যমে।

২. JavaScript API (e.g., Fetch API) এর সাথে Elm ব্যবহার

আপনি যদি Elm অ্যাপ্লিকেশন থেকে JavaScript Fetch API ব্যবহার করে ডেটা নিয়ে আসতে চান, তবে Ports ব্যবহার করে আপনি JavaScript কোড কল করতে পারেন এবং সেই ডেটা Elm অ্যাপ্লিকেশনে প্রেরণ করতে পারেন।

২.১. Fetch API ব্যবহার করে Elm থেকে API কল

ধরা যাক, আপনি একটি REST API থেকে ডেটা পেতে চান এবং সেই ডেটা Elm অ্যাপ্লিকেশনে রেন্ডার করতে চান।

Elm Code:

port module Main exposing (..)

port fetchData : Cmd msg
port dataReceived : (String -> msg) -> Cmd msg

type Msg
    = DataReceived String

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
    case msg of
        DataReceived data ->
            (model, Cmd.none)

view : Model -> Html Msg
view model =
    div []
        [ button [ onClick fetchData ] [ text "Fetch Data" ]
        ]

-- Main function
main =
    Html.beginnerProgram { model = init, view = view, update = update }

JavaScript Code:

var app = Elm.Main.init({
  node: document.getElementById('elm')
});

app.ports.fetchData.subscribe(function() {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      app.ports.dataReceived.send(JSON.stringify(data));  // Send data to Elm
    })
    .catch(error => {
      console.error('Error:', error);
    });
});

এখানে, Elm অ্যাপ্লিকেশন থেকে JavaScript Fetch API কল করা হচ্ছে এবং প্রাপ্ত ডেটা Elm-এ প্রেরণ করা হচ্ছে।

৩. Elm এবং JavaScript এর মধ্যে Interaction: Example with Local Storage

Local Storage ব্যবহার করে আপনি ওয়েব ব্রাউজারে ডেটা সংরক্ষণ করতে পারেন এবং পরবর্তীতে সেই ডেটা পুনরায় ব্যবহার করতে পারেন। আপনি JavaScript এর LocalStorage API এর সাথে Elm ইন্টিগ্রেট করতে পারেন।

৩.১. Local Storage Example

Elm Code:

port module Main exposing (..)

port saveToLocalStorage : String -> Cmd msg
port loadFromLocalStorage : (String -> msg) -> Cmd msg

type Msg
    = DataLoaded String

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
    case msg of
        DataLoaded data ->
            (model, Cmd.none)

view : Model -> Html Msg
view model =
    div []
        [ button [ onClick (saveToLocalStorage "Hello, Elm!") ] [ text "Save to Local Storage" ]
        , button [ onClick loadFromLocalStorage ] [ text "Load from Local Storage" ]
        ]

main =
    Html.beginnerProgram { model = init, view = view, update = update }

JavaScript Code:

var app = Elm.Main.init({
  node: document.getElementById('elm')
});

app.ports.saveToLocalStorage.subscribe(function(data) {
  localStorage.setItem("myData", data);
});

app.ports.loadFromLocalStorage.subscribe(function(callback) {
  const data = localStorage.getItem("myData");
  if (data) {
    app.ports.dataLoaded.send(data);  // Send the data to Elm
  } else {
    app.ports.dataLoaded.send("No data found");
  }
});

এখানে, Elm এর saveToLocalStorage পোর্টের মাধ্যমে ডেটা LocalStorage তে সেভ করা হচ্ছে, এবং loadFromLocalStorage পোর্টের মাধ্যমে তা পুনরুদ্ধার করা হচ্ছে এবং Elm এ পাঠানো হচ্ছে।

৪. Handling External APIs with Elm via Ports

Elm এ JavaScript এর মাধ্যমে বাহ্যিক API বা সার্ভিস থেকে ডেটা নেওয়া এবং তা Elm অ্যাপ্লিকেশনে গ্রহণ করার জন্য Ports ব্যবহার করা হয়। এটি সাধারণত asynchronous কার্যক্রমের জন্য ব্যবহৃত হয়, যেমন ফর্ম সাবমিশন, ডেটা ফেচিং, ইত্যাদি।

General Steps:

1. Elm থেকে JavaScript কোড কল করুন।
2. JavaScript API থেকে ডেটা নিয়ে সেই ডেটা Elm-এ পাঠান।
3. Elm-এ ডেটা গ্রহণ করে model আপডেট করুন এবং view রেন্ডার করুন।

উপসংহার

JavaScript API এর সাথে Elm ব্যবহার করা সম্ভব Ports এর মাধ্যমে, যা Elm এবং JavaScript এর মধ্যে ডেটা আদান-প্রদান করতে সাহায্য করে। আপনি Fetch API, Geolocation API, LocalStorage ইত্যাদি ব্যবহার করে JavaScript এবং Elm এর মধ্যে ইন্টারঅ্যাকশন স্থাপন করতে পারেন। Elm এর declarative nature এবং JavaScript এর শক্তিশালী API গুলোর মিশ্রণ আপনার অ্যাপ্লিকেশনে সমৃদ্ধ কার্যকারিতা তৈরি করতে সহায়তা করে।